<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    


    <!-- <div class="box">abc</div>
    <div id="test">gef</div>
    <img src="女.png" alt="这是个女头">
    <br>
    <input type="text">
    <button>隐藏密码</button> -->

    <!-- <div style="font-size: 20px;">这是一个div 点击就会变大</div> -->

    <div id="one" class="light" style= "font-size: 20px; height: 500px;">点击切换</div>

    <div class="two">div</div>
    <!-- css 标签 -->
    <style>
        .light {
            color: black;
            background-color: white;
        }

        .dark {
            color: white;
            background-color: black;
        }

        
    </style>

    <script>
        // 尾增
        let input = document.createElement('input');
        input.value = "hello";

        let div = document.querySelector('.two');
        div.appendChild(input);

        let change = document.querySelector('#one');
        change.onclick = function() {
            if(change.className == 'light') {
                change.className = 'dark';
            }else {
                change.className = 'light';
            }
        }


        let obj = {
            a:10,
            b:'hello'
        };

        obj.a = '1';
        obj.c = '2';
        console.log(obj.c);
        obj["a"] = 'hello';
        console.log(obj["a"]);
        


        // let div = document.querySelector('div');
        // div.onclick = function() {
        //     console.log(div.style.fontSize);
        //     // parseInt 此处得到的是一个 X  遇到px认为不是数字不在转
        //     let fontSize = parseInt(div.style.fontSize);
        //     fontSize += 20;
        //     div.style.fontSize = fontSize + 'px';
        // }

        // let img = document.querySelector("img");
        // console.dir(img);
        // let div = document.querySelector(".box")
        // console.dir(div);
        // div.onclick = function() {
        //     alert("hello");
        // console.log(div.innerHTML);

        // }

        // let input = document.querySelector("input");
        // let button = document.querySelector("button");

        // button.onclick = function() {
        //     if(input.type == 'text') {

        //         input.type = 'password';
        //         button.innerHTML = '显示密码';
        //     }else {
        //         input.type = "text";
        //         button.innerHTML = "隐藏密码";
        //     }
        // }

    </script>

</body>
</html>